<template>
  <div class="app-container">
    <split-pane :min-percent='30' :default-percent='40' split="vertical">
      <template slot="paneL">
        <el-card class="m-l-5 dict-tree">
          <el-button-group style="display:flex;margin-bottom:15px">
            <el-input v-model="filterTreeText" size="mini" placeholder="搜索" clearable />
            <el-button v-permission="['mall:category:delete']" size="mini" plain type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
          </el-button-group>

          <el-tree
            ref="categoryTree"
            node-key="id"
            :data="treeData"
            :props="treeProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            show-checkbox
            check-strictly
            highlight-current
            check-on-click-node
            :default-expanded-keys="['0']"
            @node-click="selectCategory"
          >
            <span slot-scope="{ data }" class="custom-tree-node w-100">
              <span>{{ data.name }}</span>
              <span class="fr">
                <el-link v-permission="['mall:category:add']" style="font-size:small;" type="success" @click.stop="handleForm(data.id)">添加子分类</el-link>
              </span>
            </span>
          </el-tree>
        </el-card>
      </template>

      <template slot="paneR">
        <!-- 搜索区域 -->
        <el-card style="margin:0 0 5px 5px">
          <el-form ref="categoryForm" :model="form" :rules="rules" label-width="120px">
            <el-form-item hidden>
              <el-input v-model="form.catId" hidden />
            </el-form-item>
            <el-form-item prop="parentCid" hidden>
              <el-input v-model="form.parentCid" hidden />
            </el-form-item>
            <el-form-item prop="catLevel" hidden>
              <el-input v-model="form.catLevel" hidden />
            </el-form-item>
            <el-form-item label="分类名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
              <div style="display:flex;">
                <icon-picker v-model="form.icon" style="width:90%" />
                <i class="el-icon-delete" @click="form.icon=''" />
              </div>
            </el-form-item>
            <el-form-item label="排序" prop="categorySort">
              <el-input-number v-model="form.categorySort" :min="1" />
            </el-form-item>
            <el-form-item label="状态" prop="showStatus">
              <el-select v-model="form.showStatus">
                <el-option
                  v-for="item in optionOfStatus"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="计量单位" prop="productUnit">
              <el-input v-model="form.productUnit" />
            </el-form-item>
            <el-form-item label="商品数量" prop="productCount">
              <el-input-number v-model="form.productCount" :min="0" />
            </el-form-item>
            <el-row type="flex" justify="center">
              <el-button v-permission="['mall:category:edit']" type="primary" icon="el-icon-check" :disabled="form.parentCid===undefined" @click="handleSave">保 存</el-button>
              <el-button v-permission="['mall:category:delete']" type="danger" icon="el-icon-delete" :disabled="form.parentCid===undefined || form.catId===undefined" @click="handleDelete(form.catId)">删 除</el-button>
            </el-row>
          </el-form>
        </el-card>
      </template>>
    </split-pane>
  </div>
</template>

<script>
import { categoryTreeData, categoryLoad, categorySave, categoryDelete } from '@/api/mall/product/category'
import SplitPane from 'vue-splitpane'
import IconPicker from '@/components/IconPicker'

export default {
  components: {
    SplitPane,
    IconPicker
  },
  data() {
    return {
      filterTreeText: '',
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        catId: undefined,
        parentCid: undefined,
        catLevel: undefined,
        name: undefined,
        icon: undefined,
        categorySort: 1,
        showStatus: '',
        productUnit: undefined,
        productCount: undefined
      },
      rules: {
        name: [{ required: true, message: '分类名称不能为空' }]
      },
      optionOfStatus: []
    }
  },
  watch: {
    filterTreeText(val) {
      this.$refs.categoryTree.filter(val)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 加载下拉菜单
      this.getTreeData()
      this.getDictData()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getDictData() {
      this.$dictGroup('sys_show_hide').then(response => {
        this.optionOfStatus = response
      }).catch(e => {})
    },
    getTreeData() {
      categoryTreeData({ from: 'vue' }).then(response => {
        this.treeData = response
      }).catch(e => {})
    },
    selectCategory(data, node) {
      this.onCancel()
      this.form.catId = data.id
      categoryLoad({ 'catId': data.id }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        this.form.showStatus = this.form.showStatus + ''
      }).catch(() => {})
    },
    handleForm(parentCid) {
      this.onCancel()
      parentCid = parentCid | '0'
      this.form.parentCid = parentCid
      categoryLoad({ 'parentCid': parentCid }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        this.form.showStatus = '0'
      }).catch(() => {})
    },
    handleSave() {
      this.$refs.categoryForm.validate(valid => {
        if (valid) {
          categorySave(this.form).then(response => {
            this.$modal.msgSuccess(response.msg)
            this.getTreeData()
          }).catch(() => {})
        }
      })
    },
    handleDelete(id) {
      const code = id || this.$refs.categoryTree.getCheckedNodes()
      if (!code) {
        this.$modal.msgWarning('请选择要删除的内容')
        return
      }

      this.$confirm('是否删除所选内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        categoryDelete({ ids: this.form.dictCode }).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.getTreeData()
        }).catch(e => {})
      }).catch(e => {})
    },
    onCancel() {
      this.$refs.categoryForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}

.filter-tree {
  overflow-y: auto;
}

.app-container {
  .filter-tree {
    height: calc(100vh - 240px);
  }
}

.fixed-header+.app-main {
  .app-container {
    .filter-tree {
      height: calc(100vh - 240px);
    }
  }
}

.hasTagsView {
  .app-main {
    .app-container {
      .filter-tree {
        height: calc(100vh - 278px);
      }
    }
  }
}

.hasTagsView {
  .fixed-header+.app-main {
    .app-container {
      .filter-tree {
        height: calc(100vh - 278px);
      }
    }
  }
}
</style>
